<template>
	<div class="number-plate-keyboard-wrap" v-if="props.kbShow">
		<div class="head">
			<div class="done" @click="done">
				完成 <text class="icon-font"></text>
			</div>
		</div>
		<div class="key-list">
			<div class="colspan" :class="{'active' : currentIndex == index }" v-for="(item, index) in keyboardList" :key="index">
				<div class="display-flex justify-center" v-for="(secondItem, secondIndex) in item" :key="secondIndex">
					<div class="item" :class="{'disable': thridItem.split(',')[1] == 'f'}" v-for="(thridItem, thridIndex) in secondItem" :key="thridIndex"
					 @click.stop="touchstartActive(thridItem)">
						<div class="content">
							{{thridItem.split(',')[0]}}
						</div>
					</div>
				</div>
			</div>
			<!-- 删除键 -->
			<div class="item del-item" @click.stop="del">
				<div class="content">
					<text class="icon-font">←</text>
				</div>
			</div>
		</div>
	</div>
</template>
<script setup lang="ts">
    import {  watch, ref, reactive } from 'vue'
	import type { Ref } from 'vue'

    const keyboardList:any = reactive([
    	[
            ['京', '粤', '津', '晋', '冀', '蒙', '辽', '吉', '黑', '渝'],
            ['苏', '浙', '皖', '闽', '赣', '鲁', '鄂', '沪', '宁'],
            ['桂', '琼', '川', '贵', '云', '藏', '陕', '新'],
            [ '','','豫', '湘', '青', '甘','','','',''],
        ],
        [
            ['1,f', '2,f', '3,f', '4,f', '5,f', '6,f', '7,f', '8,f', '9,f', '0,f'],
            ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I,f', 'O,f', 'P'],
            ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L', ''],
            ['Z', 'X', 'C', 'V', 'B', 'N', 'M', '', '', ''],
        ],
        [
            ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'],
            ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I,f', 'O,f', 'P'],
            ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L', ''],
            ['Z', 'X', 'C', 'V', 'B', 'N', 'M', '', '', ''],
        ],
        [
            ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'],
            ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I,f', 'O,f', 'P'],
            ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L', ''],
            ['Z', 'X', 'C', 'V', 'B', 'N', 'M', '', '', ''],
        ],
        [
            ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'],
            ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I,f', 'O,f', 'P'],
            ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L', ''],
            ['Z', 'X', 'C', 'V', 'B', 'N', 'M', '', '', ''],
        ],
        [
            ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'],
            ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I,f', 'O,f', 'P'],
            ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L', ''],
            ['Z', 'X', 'C', 'V', 'B', 'N', 'M', '', '', ''],
        ],
        [
            ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'],
            ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I,f', 'O,f', 'P'],
            ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L','Z'],
            ['X', 'C', 'V', 'B', 'N', 'M', '港', '澳','',''],
        ],
        [
            ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'],
            ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I,f', 'O,f', 'P'],
            ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L', ''],
            ['Z', 'X', 'C', 'V', 'B', 'N', 'M', '', '', ''],
        ]
    ])
    const currentIndex: Ref<number> = ref(0)
    const props = defineProps<{
        kbIndex: number,
        //kbType: string,
        kbShow: boolean
    }>()
    const emit = defineEmits<{
        (e:'childClose', value:boolean):void
        (e:'childDel', value: number):void
        (e:'childIndex',value: number):void
        (e:'childValue', value: any):void
    }>()

    watch(
		() => props.kbIndex,
		(num: any) => currentIndex.value = num,
		{
			immediate: true
		}
	)

    function done(){
        emit('childClose', false)
    }
    //删除
    function del(){
        emit('childDel', currentIndex.value)
        if(currentIndex.value == 0){
            return
        }
        currentIndex.value--
        emit('childIndex', currentIndex.value)
    }
    //点击事件
    function touchstartActive(res: any) {
        //键盘包含f字符不执行
        if(res.split(',')[1] == 'f' || res == ''){
            return
        }
        emit('childValue', res)
        if(currentIndex.value == keyboardList.length - 1){
            return
        }
        currentIndex.value++
        emit('childIndex', currentIndex.value)
    }
</script>

<style lang="scss" scoped>

	.number-plate-keyboard-wrap {
		position: fixed;
		bottom: 0;
		right: 0;
		left: 0;
		width: 100%;
		z-index: 999;
		box-shadow: 0 0 30px rgba(0, 0, 0, .1);
		box-sizing: border-box;
		.head{
			overflow: hidden;
			background-color: #ffffff;
			border-top: 1px #e6e5ef solid;
			.done{
				float: right;
				width: 150px;
				height: 90px;
				line-height: 90px;
				text-align: center;
				color: #007AFF;
				font-size: 34px;
				.icon-font{
					margin-left: 6px;
					font-size: 30px;
				}
			}
		}
		
		.key-list{
			padding: 4px 0;
			background: #e3e9ec;
		}
		.uni-flex{
			justify-content: center;
		}
		/*iphone键盘*/
		.item {
			width: 10%;
			height: 90px;
			margin: 6px 0;
			text-align: center;
			box-sizing: content-box;
			.content{
				line-height: 90px;
				background: #fff;
				font-size: 50px;
				border-radius: 8px;
				margin: 0 6px;
				box-shadow: 0 2px 2px rgba(0, 0, 0, .1);
			}
			&.disable .content{
				background-color: #d6dde0;
				color: #acb5b9;
			}
			&.item:not(.disable):active .content {
				background-color: #007AFF;
				color: #fff;
			}
		}
		.colspan {
			display: none;
			&.active {
				display: block;
			}
		}
		.del-item{
			position: absolute;
			right: 4px;
			bottom: 6px;
			width: 20%;
			height: 90px;
			.iconfont{
				line-height: 1;
				font-size: 50px;
			}
		}

	}
</style>

